<template>
	<view v-if="id">
		<scroll-view scroll-y>
			<view class="AD-big-img">
				<image :src="activedetail.image" alt="" />
			</view>
			<view class="active-detail-title">{{activedetail.activityName}}</view>
			<view class="active-detail">
				<view class="AD-title">活动详情</view>
				<view>活动开始时间：{{activedetail.startTime | date}}</view>
				<view>活动地点：{{activedetail.location}}</view>
				<view>活动主办方:{{activedetail.organizer}}</view>
				<view>活动结束时间：{{activedetail.updateTime | date}}</view>
				<view>活动类型：免费</view>
			</view>
			<view class="active-content">
				<view class="AC-title">活动介绍</view>
				<text class="AC-text">
					&nbsp;&nbsp;&nbsp;{{activedetail.desc}}<!-- 欢迎您加入“小城X计划“。本次分享会，邀请了十一位来自全国各地的讲者朋友们，和浩浩荡荡的几百位青年观众一起，分享聆听关于社会问题、社会创新、社区营造、可持续生活方式、教育、运动精神、青年共创、小城文化、自我定义等诸多被当代青年探讨得最为热闹的话题。 -->
				</text>
				<!-- <view class="AC-schedule">
					<view class="AC-schedule-title">“小城X计划”的计划表有：</view>
					<text>《本地有故事》——许灵怡-《homeland家园》副主编</text>
					<text>《因为一场赛事，爱上一座城》—— Ellen-柴古唐斯越野赛创始人</text>
					<text>从记录到行动：以社区影像的方法推动在地青年的成长》——吕宾-“乡村之眼公益行动影像行动计划”负责人</text>
				</view> -->
			</view>
			<view class="AD-bottom">
				<view class="AD-bottom-share">
					<view class="iconfont icon-fenxiang1"></view>
					<text>分享</text>
				</view>
				<view class="AD-bottom-collect">
					<view class="iconfont icon-aixin1"></view>
					<text>收藏</text>
				</view>
				<view class="AD-bottom-accusation">
					<view class="iconfont icon-chakantiezigengduojubao"></view>
					<text>举报</text>
				</view>
				<text class="bottom">立即报名</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getactiveDetail} from '@/http/api.js'
	
	export default {
		data() {
			return {
				id:'',
				activedetail:{}
			};
		},
		onLoad(options) {
			console.log(options);
			this.id=options.id
		},
		onShow(){
			if(this.id){
				this.getDetail(this.id)
			}else{
				uni.$showMsg('请点击活动列表',1500)
				setTimeout(()=>{
					uni.navigateTo({
						url:'/subpkg/active/activeList'
					})
				},1500)
			}
		},
		methods:{
			async getDetail(id){
				console.log( id);
				try{
					const {data:res} = await getactiveDetail(id)
					this.activedetail=res
					console.log(res);
				}catch(err){
					//TODO handle the exception
					console.log(err);
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
.AD-big-img {
	height: 580rpx;
	width: 100%;
	img {
		width: 100%;
	}
}
.active-detail-title {
	height: 60rpx;
	width: 100%;
	font-size: 48rpx;
	line-height: 60rpx;
	text-align: center;
	margin: 40rpx 0 ;
}
.active-detail {
	font-size: 32rpx;
	margin: 14rpx 10rpx 40rpx 60rpx;
	padding: 0 40rpx;
	.AD-title {
		margin-left: -50rpx;
		margin-bottom: 12rpx;
		font-size: 39rpx;
		font-weight: 700;
	}
}
.active-content {
	margin: 14rpx 10rpx 0 10rpx;
	font-size: 32rpx;
	padding: 0 40rpx;
	padding-bottom: 300rpx;
	
	.AC-title {
		margin-bottom: 12rpx;
		font-size: 39rpx;
		font-weight: 700;
	}
	.AC-text:before {
		content: '       ';
		white-space: pre;
		text-align: justify;
	}
	.AC-schedule {
		font-style: 30rpx;
		margin: 14rpx 0 142rpx 40rpx;
		view {
			font-size: 30rpx;
		}
	}
}
.AD-bottom {
	display: flex;
	height: 132rpx;
	width: 100%;
	background-color: #ffffff;
	position: fixed;
	bottom: 0rpx;
	.AD-bottom-share {
		margin-top: 22rpx;
		margin-left: 34rpx;
		.icon-fenxiang1 {
			font-size: 50rpx;
		}
		text {
			font-size: 28rpx;
		}
	}
	.AD-bottom-collect {
		padding: 0 44rpx;
		margin-top: 22rpx;
		.icon-aixin1 {
			font-size: 50rpx;
		}
		text {
			font-size: 28rpx;
		}
	}
	.AD-bottom-accusation {
		padding-top: 22rpx;
		.icon-chakantiezigengduojubao {
			font-size: 50rpx;
		}
		text {
			font-size: 28rpx;
		}
	}
	.bottom {
		height: 70rpx;
		width: 298rpx;
		border: 2rpx solid #bbbbbb;
		background-color: #e99d42;
		margin: 34rpx 0 0 128rpx;
		border-radius: 8rpx;
		line-height: 70rpx;
		text-align: center;
		color: #ffffff;
	}
}
</style>
